<!doctype html>
<html>
<head>

  <script src="../../platform/platform.js"></script>
  <link href="../core-animated-pages.html" rel="import">

  <style>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
    }

  </style>

</head>
<body unresolved>

  <polymer-element name="list-demo">
  <template>

    <style>
      p {
        margin: 8px;
      }

      .item {
        background: #e7e7e7;
        padding: 16px;
        margin: 8px;
        border-radius: 3px;
        box-sizing: border-box;
        position: relative;
      }
    </style>

    <p>Tap to move to top</p>

    <core-animated-pages id="pages" on-tap="{{reorder}}" selected="{{selected}}" on-core-animated-pages-transition-end="{{done}}" transitions="hero-transition">

      <section>
        <template repeat="{{items}}">
          <div hero-id="{{h}}" hero class="item">{{v}}</div>
        </template>
      </section>

      <section>
        <template repeat="{{items2}}">
          <div hero-id="{{h}}" hero class="item">{{v}}</div>
        </template>
      </section>

    </core-animated-pages>

  </template>

  <script>

    Polymer('list-demo', {

      selected: 0,

      items: [
        {h: 'matt', v: 'Matt McNulty'},
        {h: 'scott', v: 'Scott Miles'},
        {h: 'steve', v: 'Steve Orvell'},
        {h: 'frankie', v: 'Frankie Fu'},
        {h: 'daniel', v: 'Daniel Freedman'},
        {h: 'yvonne', v: 'Yvonne Yip'},
      ],

      items2: [
        {h: 'matt', v: 'Matt McNulty'},
        {h: 'scott', v: 'Scott Miles'},
        {h: 'steve', v: 'Steve Orvell'},
        {h: 'frankie', v: 'Frankie Fu'},
        {h: 'daniel', v: 'Daniel Freedman'},
        {h: 'yvonne', v: 'Yvonne Yip'},
      ],

      reorder: function(e) {
        if (this.$.pages.transitioning.length) {
          return;
        }

        this.lastMoved = e.target;
        this.lastMoved.style.zIndex = 10005;
        var item = e.target.templateInstance.model;
        var items = this.selected ? this.items : this.items2;
        var i = this.selected ? this.items2.indexOf(item) : this.items.indexOf(item);
        if (i != 0) {
          items.splice(0, 0, item);
          items.splice(i + 1, 1);
        }

        this.lastIndex = i;
        this.selected = this.selected ? 0 : 1;
      },

      done: function() {
        var i = this.lastIndex;
        var items = this.selected ? this.items : this.items2;
        var item = items[i];
        items.splice(0, 0, item);
        items.splice(i + 1, 1);
        this.lastMoved.style.zIndex = null;
      }
    });

  </script>

  </polymer-element>

  <list-demo></list-demo>

</body>
</html>